<template>
  <span>
    <auth-button @click="setDefaultBanner()" name="设置默认banner" />

    <el-dialog
      title="设置默认banner"
      :visible.sync="dfbModel.show"
      :close-on-click-modal="false"
      v-if="dfbModel.show"
      destroy-on-close
      custom-class="custom-dialog"
      width="900px"
    >
      <el-form
        ref="rowFormBanner"
        :model="dfbModel.data"
        label-position="right"
        label-width="120px"
        v-loading="dataLoading"
      >
        <div
          v-for="(item, index) in dfbModel.data.list"
          :key="index"
          style="border-bottom: 1px solid #ddd; margin-bottom: 20px;"
        >
          <el-form-item
            label="位置"
            :prop="'list.' + index + '.positionType'"
            v-if="bannerPosition.length > 1"
            :rules="{ required: true, message: '必填' }"
          >
            <KiSelect v-model="item.positionType" :options="bannerPosition" />
          </el-form-item>
          <el-form-item
            v-if="item.positionType"
            label="banner图片"
            :prop="'list.' + index + '.filePath'"
            :rules="{ required: true, message: '必填' }"
            class="img-box"
          >
            <Imgpond
              v-model="item.filePath"
              :aspectRatio="getFixedRatio(item)"
              :count="1"
            />
            <el-button
              v-if="dfbModel.data.list.length > 1"
              class="delete-btn"
              type="danger"
              round
              icon="el-icon-delete"
              @click="removeItem(index)"
            ></el-button>
          </el-form-item>
          <el-form-item
            label="展示顺序"
            :prop="'list.' + index + '.sort'"
            :rules="{ required: true, message: '必填' }"
          >
            <Sort v-model="item.sort" />
          </el-form-item>
          <el-form-item label="跳转页面" prop="sourceId">
            <GlobalSearch
              v-model="item.sourceId"
              :type.sync="item.type"
              :sourceId.sync="item.sourceId"
              :sourceName.sync="item.sourceName"
            />
          </el-form-item>
        </div>
        <el-button @click="addItems()" type="primary" plain style="width: 100%"
          >添加</el-button
        >
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dfbModel.show = false"> 关 闭 </el-button>
        <el-button
          type="primary"
          @click="submitDefaultBanner"
          :loading="dfbModel.loading"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </span>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'default-banner',
  props: ['bannerPosition'],
  data () {
    return {
      dataLoading: false,
      dfbModel: {
        show: false,
        loading: false,
        data: {
          list: []
        }
      }
    }
  },
  computed: {
    ...mapGetters(['dict'])
  },
  created () {
    this.getDefaultBanner()
  },
  methods: {
    removeItem (index) {
      this.dfbModel.data.list.splice(index, 1)
    },
    addItems () {
      if (this.dfbModel.data.list.length >= 9) {
        this.$swal.error('最多可以新增9个banner默认图')
        return
      }
      this.dfbModel.data.list.push({
        sort: '',
        positionType: this.bannerPosition[0].dataValue,
        filePath: '',
        type: '00',
        sourceId: '',
        sourceName: ''
      })
    },
    defaultBannerSearch (item, index) {
      if (item !== undefined) {
        this.dfbModel.data.list[index].type = item.src_type || '00'
        this.dfbModel.data.list[index].sourceId = item.id
        this.dfbModel.data.list[index].sourceName = item.name
      }
    },
    // 获取默认banner
    getDefaultBanner () {
      this.dataLoading = true
      let banners = []
      this.$POST('/one-travel-api/banner-default/queryForList', {
        // positionTypes: this.bannerPosition.map(item => item.dataValue)
        positionType: this.bannerPosition.map(item => item.dataValue)[0]
      })
        .then(res => {
          if (res.errorCode == '00000') {
            banners = res.data
          }
        })
        .finally(_ => {
          // 配置参数
          this.dfbModel.data.list = []
          this.bannerPosition.forEach((item, index) => {
            // 查看当前banner是否已经配置过
            banners.forEach(item2 => {
              if (item.dataValue == item2.positionType) {
                this.dfbModel.data.list.push(item2)
              }
            })
          })
          if (this.dfbModel.data.list.length == 0) {
            this.addItems()
          }
          this.dataLoading = false
        })
    },
    setDefaultBanner () {
      this.getDefaultBanner()
      this.dfbModel.show = true
    },
    submitDefaultBanner () {
      this.$refs.rowFormBanner.validate(valid => {
        if (valid) {
          this.dfbModel.loading = true
          this.$POST('/one-travel-api/banner-default/saveOrUpdate', this.dfbModel.data.list)
            .then(res => {
              if (res.errorCode == '00000') {
                this.dfbModel.show = false
                this.getDefaultBanner()
                this.$swal.success('提交成功')
              } else {
                this.$swal.error(res.message)
              }
            })
            .finally(_ => {
              // 配置参数
              this.dfbModel.loading = false
            })
        }
      })
    },
    getFixedRatio (row) {
      if (row.positionType) {
        return this.dict.banner_position.filter(v => {
          if (v.dataValue === row.positionType) {
            return v
          }
        })[0]?.remark
      }
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.img-box) {
  .el-form-item__content {
    position: relative;
    .delete-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
